Day-10 事件處理：提升互動性

2024 iThome 鐵人賽

DAY 10

Modern Web

新手友善園區-如何架設人生第一個網站系列第 10 篇

16th鐵人賽

zxcvbnm

2024-09-23 22:29:27

65 瀏覽

分享至

在現代網頁開發中，互動性是用戶體驗的重要元素，而JavaScript的事件處理機制正是實現這一功能的核心。透過 JavaScript 的事件監聽，我們可以對用戶的操作做出響應，創建一個更動態、更有趣的網頁。今天，我們將介紹事件的概念、常見的事件類型，並展示如何使用事件處理程序來提升網頁的互動性。

什麼是事件處理？

事件處理（Event Handling）是指在使用者與網站進行互動時，對這些互動行為作出反應的機制。在 Web 開發中，「事件」可以是使用者的任何行為，例如：

點擊按鈕
滑鼠移動
按下鍵盤上的按鍵
提交表單
畫面滾動

每當使用者觸發這些行為，瀏覽器就會生成一個「事件」，然後開發者可以設定相應的程式碼來「處理」這個事件。

JavaScript 的事件處理機制

在 JavaScript 中，我們可以使用addEventListener()方法來監聽事件，並設定對應的處理函數。這是事件處理的基礎。

常見事件與監聽方法

1.滑鼠事件：

click：點擊
dblclick：雙擊
mouseover：滑鼠移過元素
mouseout：滑鼠離開元素

2.鍵盤事件：

keydown：按下鍵盤按鍵
keyup：釋放鍵盤按鍵

3.表單事件：

submit：表單提交
change：表單元素的值改變

4.瀏覽器事件：

load：頁面加載完成
scroll：頁面滾動

基本範例

HTML

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>事件處理示例</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>事件處理範例</h1>
  <button id="myButton">點擊我</button>
  <p id="message">這裡會顯示訊息</p>

  <script src="script.js"></script>
</body>
</html>

JavaScript

// 獲取按鈕和段落元素
const button = document.getElementById('myButton');
const message = document.getElementById('message');

// 初始狀態
let isClicked = false; // 用來追蹤是否已點擊

// 為按鈕添加點擊事件監聽器
button.addEventListener('click', function() {
  if (isClicked) {
    message.innerText = '這裡會顯示訊息'; // 恢復原本訊息
  } else {
    message.innerText = '你剛剛點擊了按鈕！'; // 改變為新的訊息
  }
  isClicked = !isClicked; // 每次點擊後切換狀態
});

解釋：

getElementById()：是一個 DOM 操作方法，用來根據指定的元素 id 來獲取該元素。在這裡，'myButton'對應 HTML 中按鈕的id="myButton"，'message'對應段落的id="message"。
這一行定義了一個布林變數 isClicked，用來追蹤按鈕是否被點擊。
- let：是 JavaScript 用來定義變數的關鍵字，該變數的作用範圍限於當前代碼塊。
- false：表示初始狀態下按鈕還沒有被點擊。
  這個變數的狀態將在之後的程式邏輯中被翻轉，從而實現按鈕點擊後訊息交替顯示。
在這裡，我們綁定的是click事件，也就是當按鈕被點擊時會執行裡面的函數（function()）。
一旦事件發生，就會出現'你剛剛點擊了按鈕！'，再按一次會恢復原本的訊息。

function()的定義與作用

在 JavaScript 裡，函數是一種用來封裝一組操作或運算的邏輯單元。它能夠被多次調用，從而避免重複的代碼。function()就是 JavaScript 中定義函數的基本語法。
範例：

function sayHello() {
  console.log('Hello World');
}

這個範例定義了一個名為sayHello的函數，當調用這個函數時，會輸出 "Hello World"。

匿名函數 (Anonymous Function)

當我們在事件監聽器中使用function()時，這通常稱為**「匿名函數」**（因為這個函數沒有名字）。匿名函數是一種即時執行的函數，當特定事件發生時才會執行。
範例：

button.addEventListener('click', function() {
  console.log('Button clicked');
});

為什麼在事件監聽器中使用 function()？

當使用addEventListener()綁定事件時，我們需要指定一個函數來描述當該事件發生時要執行的行為。在這裡使用匿名函數可以讓程式更加簡潔，因為這個函數僅在事件觸發時使用，不需要在其他地方被調用。

事件傳遞機制（事件冒泡與捕獲）

當事件發生時，瀏覽器會依照事件傳遞機制來處理事件。這個過程分為兩個階段：捕獲(Capuring)階段 和 冒泡(Bubbling)階段。要理解這個機制，我們可以將它比喻成「從大到小進入盒子，再從小到大出來」的過程。

Event Capuring：事件從最外層的父元素開始，逐層往內走，直到到達被觸發事件的目標元素為止。
Event Bubbling：當事件觸發後，事件會從目標元素逐層向外傳遞，直到最外層的元素。
這兩個階段就是事件在 DOM 樹（Document Object Model，文檔物件模型）中的傳遞方式。瀏覽器會先從根節點（最外層）往下，經過每一層元素到目標元素（捕獲階段），然後再從目標元素往回傳（冒泡階段）。

addEventListener() 的第三個參數

在 JavaScript 中，addEventListener()方法允許你指定事件是應該在捕獲階段還是冒泡階段進行處理。這個方法的第三個參數（options）可以是一個布林值或物件，決定事件處理器應該在哪個階段被調用：

false 或未設置（預設）：事件在冒泡階段處理。
true：事件在捕獲階段處理。

具體範例

HTML：

<div id="outer" style="padding: 50px; background-color: lightblue;">
  外層區域
  <div id="inner" style="padding: 30px; background-color: lightgreen;">
    內層區域
  </div>
</div>

這裡有一個div元素包著另一個div。當我們對內層div（#inner）進行點擊時，會發生兩個事件：
1. 內層區域的點擊事件會先被觸發。
2. 外層區域的點擊事件會接著被觸發。
這就是事件冒泡的結果，因為事件會先從目標元素處觸發，然後向外冒泡，直到傳遞到最外層的父元素。
JavaScript

document.getElementById('outer').addEventListener('click', function() {
  alert('外層被點擊！');
});

document.getElementById('inner').addEventListener('click', function() {
  alert('內層被點擊！');
});

事件冒泡的過程：
1.當你點擊 #inner 時，首先觸發的是 #inner 上的點擊事件，彈出「內層被點擊！」。
2.接著，事件會冒泡到它的父元素 #outer，並觸發 #outer 上的點擊事件，彈出「外層被點擊！」。
這是因為默認情況下，addEventListener() 會在冒泡階段處理事件。